import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';

interface composerUtil {
  renderScene: RenderPass | undefined;
  bloomPass: UnrealBloomPass| undefined;
  bloomComposer: EffectComposer| undefined;
  bloomPassThreshold: number;
  bloomPassStrength: number;
  bloomPassRadius: number;
}

export const composerUtil =<composerUtil> {
  renderScene: undefined,
  bloomPass: undefined,
  bloomComposer: undefined,
  bloomPassThreshold: 0.21,
  bloomPassStrength: 0.2,
  bloomPassRadius: 0.22,
};

export function effectComposer(
  renderer: THREE.WebGLRenderer,
  scene: THREE.Scene,
  camera: THREE.Camera,
  width: number,
  height: number
) {
  composerUtil.renderScene = new RenderPass(scene, camera);
  composerUtil.bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), 1, 0.4, 0.85);
  composerUtil.bloomPass.threshold = composerUtil.bloomPassThreshold;
  composerUtil.bloomPass.strength = composerUtil.bloomPassStrength;
  composerUtil.bloomPass.radius = composerUtil.bloomPassRadius;
  composerUtil.bloomComposer = new EffectComposer(renderer);
  composerUtil.bloomComposer.setSize(width, height);
  composerUtil.bloomComposer.renderToScreen = false;
  composerUtil.bloomComposer.addPass(composerUtil.renderScene);
  composerUtil.bloomComposer.addPass(composerUtil.bloomPass);
}